<template>
	<view>
	<!-- 	<view @click="go('/pages/search/list?cateId=201')"  class="flex-col justify-start items-center text-wrapper_2" ><text class="font_2">宠物寄养</text></view>
		  <view @click="go('/pages/search/list?cateId=202')"  class="flex-col justify-start items-center text-wrapper_3"><text class="font_2">宠物美容</text></view>
		  <view @click="go('/pages/search/list?cateId=203')"  class="flex-col justify-start items-center text-wrapper_4"><text class="font_2">宠物医院</text></view>
		  <view @click="go('/pages/search/list?cateId=204')"  class="flex-col justify-start items-center text-wrapper_5"><text class="font_2">宠物训练</text></view>
		  <view @click="go('/pages/search/list?cateId=206')"  class="flex-col justify-start items-center text-wrapper_6"><text class="font_2">宠物摄影</text></view>
		
		 -->
		<template v-if="isSlided">
			<swiper :autoplay="isSlidedAuto" :interval="interval" :indicator-dots="indicatorDots"
				:indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor"
				:style="'height:'+ swiperHeight +'rpx'">
				<swiper-item v-for="(item,index) in newMenuList" :key="index">
					<view class="menu-box">
						<view v-for="(self, idx) in item" :key="idx" class="menu-item" @click="handleOnClick(self)">
							<image class="menu-item-img" :src="self.url" mode=""
								:style="'width:'+imgHeight+'rpx;' + 'height:'+imgHeight+'rpx;'"></image>
							<view class="menu-item-text">{{self.name}}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</template>
		<template v-else>
			<view class="menu-box">
				<view v-for="(item, index) in menuList" :key="index" class="menu-item" @click="handleOnClick(item)">
					<image class="menu-item-img" :src="item.url" mode=""
						:style="'width:'+imgHeight+'rpx;' + 'height:'+imgHeight+'rpx;'"></image>
					<view class="menu-item-text">{{item.name}}</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		props: {
			// 菜单选项数据
			menuList: {
				type: Array,
				default () {
					return []
				}
			},
			//图标高度（rpx）
			imgHeight: {
				type: Number,
				default: 96
			},
			//是否 可以滑动
			isSlided: {
				type: Boolean,
				default: false
			},
			//滑动每页展示几行
			rowNum: {
				type: Number,
				default: 1
			},
			//是否 自动滑动
			isSlidedAuto: {
				type: Boolean,
				default: false
			},
			//是否展示指示点
			indicatorDots: {
				type: Boolean,
				default: true
			},
			//指示点颜色
			indicatorColor: {
				type: String,
				default: 'rgba(213,215,221, 1)'
			},
			//指示点选中颜色
			indicatorActiveColor: {
				type: String,
				default: 'rgba(40, 124, 248, 1)'
			},
			//自动切换时间间隔
			interval: {
				type: Number,
				default: 5000
			}
		},
		data() {
			return {
				newMenuList: [],
				swiperHeight: 0
			}
		},
		mounted() {
			if (this.isSlided) {
				this.swiperHeight = (parseInt(this.imgHeight) + 100) * parseInt(this.rowNum)
				if (this.indicatorDots) this.swiperHeight = this.swiperHeight + 50
				let len = 4 * parseInt(this.rowNum)
				var dataArr = new Array(Math.ceil(this.menuList.length / len));
				for (let i = 0; i < dataArr.length; i++) {
					dataArr[i] = new Array();
					for (let j = 0; j < len; j++) {
						dataArr[i][j] = '';
					}
				}
				for (let i = 0; i < this.menuList.length; i++) {
					dataArr[parseInt(i / len)][i % len] = this.menuList[i];
				}
				this.newMenuList = dataArr
			}
		},
		methods: {
			handleOnClick(item) {
				this.$emit("clickItem", item)
			}
		}
	}
</script>

<style scoped>
	.menu-box {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-gap: 24rpx;
	}

	.menu-item-img {
		display: flex;
		margin: 20rpx auto;
	}

	.menu-item-text {
		font-size: 28rpx;
		text-align: center;
	}
</style>
